<template>
  <div class="app">
    <h2>demo</h2>
    <button @click="getdataqm('Next')">Next Image</button>
    <div class="content">
      <div class="item" v-for="item in imagedata" :key="item.url">
        <img
          :src="`//images.weserv.nl/?url=${item.url}`"
          alt=""
          class="image"
        />
      </div>
    </div>
    <!-- <button @click="getdata">yhtp Image</button>
  <div class="content">
    <div class="item" v-for="item in imagedata" :key="item.url">
      <img :src="item.url" alt="" class="image">
    </div>
  </div> -->
  </div>
</template>

<script setup>
import axios from 'axios'
import { onMounted, ref } from 'vue'
const imagedata = ref([])
onMounted(async () => {
  // await getdata()
  await getdataqm()
  // await getone()
})

const imgsteam = ref({})
const getdata = async () => {
  imagedata.value = []
  for (let i = 1; i <= 12; i++) {
    axios
      .get('/API/tp/yhtp.php', {
        responseType: 'blob' // 必须说明 axios 请求类型
      })
      .then(res => {
        console.log(res.data)
        imgsteam.value = {}
        imgsteam.value.url = window.URL.createObjectURL(res.data) // 后端返回前端渲染
        console.log(imgsteam.value)
        imagedata.value.push(imgsteam.value)
      })
  }
}

//倾梦api
let page = 1
const getdataqm = async control => {
  console.log(control)
  if (control === 'Next') {
    page += 1
  }
  const res = await axios.get(
    `/API/tp/sjbz/sjbz.php?screen=&format=1&page=${page}&limit=12`
  )
  imagedata.value = res.data.data
  console.log(imagedata.value, 'res')
}

//taobao/动漫
const item = ref({})
const getone = async () => {
  setInterval(async () => {
    item.value = {}
    // const res = await axios.get('/API/wztp/dmst.php')
    // const res = await axios.get('https://api.uomg.com/api/rand.img3?sort=胖次猫&format=json')
    // const res = await axios.get('https://api.uomg.com/api/rand.img3?sort=七了个三&format=json')
    // const res = await axios.get('https://api.uomg.com/api/rand.img3')
    console.log(res.data)
    imagedata.value.push(item.value)
    item.value.url = res.data?.text
  }, 1500)
}
</script>

<style lang="less" scoped>
.app {
  width: 100%;
  height: 100%;
  background-color: #ccc;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

h2 {
  text-align: center;
  margin-bottom: 20px;
}

.content {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.item {
  margin: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  border-radius: 5px;
  overflow: hidden;
}
button {
  margin-bottom: 20px;
}
.image {
  width: 200px;
  height: auto;
  object-fit: cover;
}
</style>
